<template>
  <a-modal
    :title="'新增标签'"
    :visible="true"
    destroyOnClose
    @ok="handleOk"
    @cancel="$emit('close-modal')"
    :confirmLoading="requestLoading"
    okText="确定"
    cancelText="取消"
  >
    <a-form-model
      :model="form"
      :rules="formRules"
      ref="ruleForm"
      labelAlign="left"
      :label-col="{ span: 4 }"
      :wrapperCol="{ span: 18 }">
      <a-form-model-item label="所属分类" prop="pid">
        <a-select
          v-model="form.pid"
          placeholder="请选择所属分类"
        >
          <a-select-option
            v-for="item in categoryOption"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="标签名称" prop="tagName">
        <a-input v-model="form.tagName" placeholder="请输入标签名称" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { categoryOption } from '~/config/optionMap'
export default {
  data () {
    return {
      categoryOption,
      requestLoading: false,
      form: {
        pid: undefined,
        tagName: null
      },
      formRules: {
        pid: [
          { required: true, message: '请选择标签所属分类', trigger: 'blur', whitespace: true }
        ],
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'change', whitespace: true },
          { max: 24, message: '标签名称最大长度不能超过24位', trigger: 'blur' }
        ]
      }
    }
  },

  created () {
  },

  methods: {
    handleOk () {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.requestLoading = true
          try {
            const path = '/gimishare/api/v1/tag/create'
            await this.$axios.post(path, this.form)
            this.$message.success('新增标签成功')
            this.$emit('close-modal', true)
          } catch (error) {
            console.log(error)
          } finally {
            this.requestLoading = false
          }
        }
      })
    }
  }
}
</script>
